<template>
  <div class="y-table-full">
    <div class="y-table-tools">
      <y-table-filter
        :options="filter"
        @search="$emit('search', $event)"
      ></y-table-filter>
      <y-table-operation
        v-bind="operation"
        bus
        @event="operationEvent"
      ></y-table-operation>
    </div>
    <div class="y-table-container">
      <!-- 普通表格 -->
      <y-table
        v-if="!table.type"
        v-bind="table"
        ref="$table"
        @load="$emit('load', $event)"
      ></y-table>
      <!-- 树表格 -->
      <y-table-tree
        v-if="table.type == 'tree'"
        v-bind="table"
        ref="$treeTable"
        @load="$emit('load', $event)"
      ></y-table-tree>
    </div>
  </div>
</template>


<script>
export default {
  name: "y-table-full",
  props: {
    filter: Array,
    table: Object,
    operation: Object,
  },
  data(){
    return {
        api: {}
    }
  },
  created() {},
  mounted() {
    var { $table, $treeTable } = this.$refs;
    if ($table) this.api = $table.api;
    if ($treeTable) this.api = $treeTable.api;
  },
  methods: {
    /**
     * 操作工具栏事件总线
     */
    operationEvent() {
      this.$emit(arguments[0].trigger, ...arguments);
    },
  },
};
</script>

<style lang="scss" scoped>
.y-table-tools {
  display: flex;
  justify-content: space-between;
  height: 32px;
  margin-bottom: 10px;
}
.y-table-container {
  height: calc(100% - 42px);
}
</style>